<template>
    <div class="login_panel">
        <!-- logo部分 -->
<!--        <div class="logo">-->
<!--            <img src="./../../icons/反白logo@2x.png" width="200" height="40" alt="">-->
<!--        </div>-->
        <!-- 登录窗口 -->
        <div class="login_box">
            <img src="../../images/wenone.png" width="19" height="17" alt="" class="one">
            <img src="../../images/wentwo.png" width="58" alt="75" height="50" class="two">
            <p class="lg_title">智能表单</p>
            <p class="welcome">欢迎回来</p>
            <div class="login_form">
                <div class="emailCent">
                    <p class="emailTip">请输入注册邮箱</p>
                    <input type="email" class="emailIn" placeholder="" v-model="email">
                    <img class="chahao" v-show="emailTip" @click="clearCont('email')" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <span class="tips">未注册邮箱</span>
                </div>
                <div class="passwordCent">
                    <p class="passwTip">请输入密码</p>
                    <input type="text" class="passwordIn" v-model="password" v-if="Passwordshow">
                    <input type="password" class="passwordIn" v-model="password" v-else>
                    <img class="chahao" v-show="passwordTip" @click="clearCont('password')" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <img class="visibles" @click="togglePassword" src="http://api-lunacy.icons8.com/api/assets/b984f56e-9105-4314-a202-66ce3326aa52/btn_睁眼.png" alt="">
                    <span class="tips">密码错误</span>
                </div>
            </div>
            <div class="install">
                <el-checkbox v-model="checked" class="keepingLogin">保持登录状态</el-checkbox>
                <span class="gotoForget" @click="gotoForget">忘记密码?</span>
            </div>
            <div class="goinNow" @click="loginNow">
                立即登录
            </div>
            <div class="thirdLogin">
                <hr> <span>更多登录方式</span>
                <hr>
            </div>
            <div class="weixinAndQQ">
                <img src="../../images/weixin.png" alt="">
                <img src="../../images/qq.png" alt="">
            </div>
            <div class="login_bottom" @click="gotoRegister">
                <p class="gotoRegister">还有账号？ 去注册</p>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '../../public/api/api';
    import {Message} from "element-ui";
    import Cookies from 'js-cookie'
export default {
    data() {
        return {
            checked: true,
            email:'',
            emailTip:false,
            password:'',
            passwordTip:false,
            Passwordshow:false,
        };
    },
    watch:{
        email:function (val) {
            if(val.length>0){
                this.emailTip=true
            }
        },
        password:function (val) {
            if(val.length>0){
                this.passwordTip=true
            }
        }
    },
    methods:{
        gotoForget(){
            this.$router.push("/resetWord")
        },
        clearCont(val){
            if(val=='email'){
                this.email=''
            }else{
                this.password=""
            }
        },
        togglePassword(){
            this.Passwordshow=!this.Passwordshow
        },
        gotoRegister(){
            this.$router.push("/register")
        },
        loginNow(){
            var that=this;
            var params={
                'email': this.email,
                'password': this.password
            }
            api.post('Post','/api/auth/login', params,'formData')
                .then(function (response) {
                    console.log(response);
                    console.log(params);
                    Message.success('登录成功');
                    // 存储用户信息
                    that.$store.state.userMessage.name=response.data.data.name;
                    that.$store.state.userMessage.id=response.data.data.id;
                    that.$store.state.userMessage.email=response.data.data.email;
                    that.$store.state.userMessage.accessToken=response.data.data.access_token;
                    Cookies.set('accessToken', response.data.data.access_token,{ expires: response.data.data.expires_in});
                    setTimeout(function () {
                        that.$router.push("/index")
                    },500)
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
}
</script>

<style lang="less" scoped>
@import url('./login.less');
</style>


